<template>
  <div class="BedpadManagement">
    <!-- 状态栏 -->
    <el-row>
      <el-col style="display:flex;align-items: center;margin-bottom:10px;">
        <div class="border"></div>
        <h3>{{ cameraManagement.indoorTemperatureTitle }}</h3>
      </el-col>
    </el-row>
    <el-row>
      <el-row style="display:flex;align-items: center;margin-left:20px">
        <el-col :span="16">
          <el-button
            class="addBtn boxShadowButton"
            icon="el-icon-circle-plus"
            style="margin-right:40px"
            @click="add"
            >{{ cameraManagement.add }}</el-button
          >
          <span>{{ cameraManagement.search }}</span>
          <el-input
            style="width:260px;margin-right:10px"
            v-model.trim="formInline.deviceNo"
            :placeholder="cameraManagement.deviceNo"
            @keyup.enter.native.prevent="enterSearchMember"
          ></el-input>
          <el-button class="searchBtn boxShadowButton" @click="search">{{
            cameraManagement.check
          }}</el-button>
        </el-col>
        <el-col :span="8" align="right">
          <el-button
            class="prevPage boxShadowButton"
            :disabled="pageNum == firstPage"
            @click="handlePrevPage"
            >{{ $t("m.prevPage") }}</el-button
          >
          <el-button
            class="nextPage boxShadowButton"
            :disabled="pageNum == lastPage"
            @click="handleNextPage"
            >{{ $t("m.nextPage") }}</el-button
          >
        </el-col>
      </el-row>
    </el-row>

    <!-- 温湿度列表 -->
    <el-row>
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        style="width: 100%;margin-top:10px;margin-left:20px"
        :row-style="tableRowStyle"
        :header-cell-style="tableHeaderColor"
      >
        <el-table-column
          prop="deviceNo"
          :label="cameraManagement.sort"
          min-width="120"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="deviceName"
          :label="cameraManagement.name"
          min-width="120"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="buildingName"
          :label="cameraManagement.build"
          min-width="120"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span
              v-if="
                scope.row.buildingName == '' ||
                  scope.row.buildingName == undefined ||
                  scope.row.buildingName == null
              "
              >--</span
            >
            <span v-else>{{ scope.row.buildingName }}</span>
          </template>
        </el-table-column>
        <!-- // 测试说要删掉 -->
        <!-- <el-table-column
          prop="floorNo"
          :label="cameraManagement.floor"
          min-width="120"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span
              v-if="
                scope.row.floorNo == '' ||
                  scope.row.floorNo == undefined ||
                  scope.row.floorNo == null
              "
              >--</span
            >
            <span v-else>{{ scope.row.floorNo }}</span>
          </template>
        </el-table-column> -->
        <el-table-column
          prop="roomNo"
          :label="cameraManagement.roomNo"
          min-width="120"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span
              v-if="
                scope.row.roomNo == '' ||
                  scope.row.roomNo == undefined ||
                  scope.row.roomNo == null
              "
              >--</span
            >
            <span v-else>{{ scope.row.roomNo }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="oldmanName"
          :label="cameraManagement.oldman"
          min-width="120"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span
              v-if="
                scope.row.oldmanName == '' ||
                  scope.row.oldmanName == undefined ||
                  scope.row.oldmanName == null
              "
              >--</span
            >
            <span v-else>{{ scope.row.oldmanName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          :label="cameraManagement.status"
          min-width="120"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.status == 'online'"
              style="color:green;cursor: pointer;"
              @click="equipmentstatus(scope.row);"
              >{{ cameraManagement.online }}</span
            >
            <span
              v-else
              style="color:red;cursor: pointer;"
              @click="equipmentstatus(scope.row);"
              >{{ cameraManagement.offline }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          :label="cameraManagement.dosth"
          min-width="250"
          align="center"
        >
          <template slot-scope="scope">
            <!--
              <el-button
                class="editBtn boxShadowButton"
                @click="handleEdit(scope.row)"
                :size="size"
              >{{cameraManagement.fix}}</el-button>
            -->
            <el-button
              v-if="scope.row.bind == false"
              class="detailBtn boxShadowButton"
              @click="bangding(scope.row);"
              :size="size"
              >{{ cameraManagement.bangding }}</el-button
            >
            <el-button
              v-if="scope.row.bind == true"
              class="jiebangBtn boxShadowButton"
              @click="unBind(scope.row);"
              :size="size"
              >{{ cameraManagement.jiebang }}</el-button
            >
            <el-button
              class="deleteBtn boxShadowButton"
              @click="deleteClick(scope.row);"
              :size="size"
              >{{ $t("m.delete") }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        layout="total, prev, pager, next, jumper"
        :total="totalDataNumber"
        :page-size="pageSize"
        align="center"
        class="fenye"
      ></el-pagination>
    </el-row>

    <!-- 温湿度绑定的dialog -->
    <el-dialog
      :title="cameraManagement.bangding"
      :visible.sync="dialogVisible"
      width="30%"
      @close="closeBangding"
      class="deviceDialog"
      :center="true"
    >
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-position="top"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="12" align="center">
            <el-tooltip
              class="item"
              effect="dark"
              :content="backList.deviceNo"
              placement="bottom"
            >
              <el-form-item
                class="deviceDialog-contentOne"
                :label="cameraManagement.sort"
                >{{ backList.deviceNo }}</el-form-item
              >
            </el-tooltip>
          </el-col>
          <el-col :span="12">
            <el-form-item
              class="deviceDialog-contentTwo"
              :label="cameraManagement.build"
              prop="build"
              ref="build"
            >
              <el-select v-model="ruleForm.build" @change="changeBuild">
                <el-option
                  v-for="(item, index) in buildList"
                  :key="index"
                  :label="item.buildingName"
                  :value="item.buildingId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" align="center">
            <el-tooltip
              class="item"
              effect="dark"
              :content="backList.deviceName"
              placement="bottom"
            >
              <el-form-item
                class="deviceDialog-contentOne"
                :label="cameraManagement.name"
                >{{ backList.deviceName }}</el-form-item
              >
            </el-tooltip>
          </el-col>
          <!-- 测试说要这么改 -->
          <!--
            <el-col :span="12">
              <el-form-item class="deviceDialog-contentTwo" :label="cameraManagement.floor" prop="floor" ref="floor">
                <el-select v-model="ruleForm.floor" @change="changeFloor">
                  <el-option
                    v-for="(item,index) in floorList"
                    :key="index"
                    :label="item.floorNo"
                    :value="item.floorNo"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          -->
          <el-col :span="12">
            <el-form-item
              class="deviceDialog-contentTwo"
              :label="cameraManagement.roomNo"
              prop="room"
              ref="room"
            >
              <el-select v-model="ruleForm.room" @change="changeRoom">
                <el-option
                  v-for="(item, index) in roomList"
                  :key="index"
                  :label="item.roomNo"
                  :value="item.roomId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" align="center">
            <el-tooltip
              class="item"
              effect="dark"
              :content="oldName"
              placement="bottom"
            >
              <el-form-item
                class="deviceDialog-contentOne"
                :label="cameraManagement.oldman"
                >{{ oldName }}</el-form-item
              >
            </el-tooltip>
          </el-col>
          <!-- 为了页面美观,移动到上面 -->
          <!--
            <el-col :span="12">
              <el-form-item class="deviceDialog-contentTwo" :label="cameraManagement.roomNo" prop="room" ref="room">
                <el-select v-model="ruleForm.room" @change="changeRoom">
                  <el-option
                    v-for="(item,index) in roomList"
                    :key="index"
                    :label="item.roomNo"
                    :value="item.roomId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          -->
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button
          class="deleteBtn boxShadowButton"
          :size="size"
          @click="bangdingForm('ruleForm');"
          >{{ cameraManagement.yes }}</el-button
        >
        <el-button
          class="cancelBtn boxShadowButton"
          :size="size"
          @click="dialogVisible = false;"
          >{{ cameraManagement.no }}</el-button
        >
      </div>
    </el-dialog>

    <!-- 解绑 -->
    <el-dialog
      :title="cameraManagement.jiebang"
      :visible.sync="jiebangDialogVisible"
      width="30%"
      :center="true"
    >
      <h3 style="text-align:center">{{ cameraManagement.jiebangWordTemp }}</h3>
      <span slot="footer" class="dialog-footer">
        <el-button
          class="deleteBtn boxShadowButton"
          @click="jiebangCheck"
          :size="size"
          >{{ cameraManagement.yes }}</el-button
        >
        <el-button
          class="cancelBtn boxShadowButton"
          :size="size"
          @click="jiebangDialogVisible = false;"
          >{{ cameraManagement.no }}
        </el-button>
      </span>
    </el-dialog>

    <!-- 删除 -->
    <el-dialog
      :title="cameraManagement.deleteDevice"
      :visible.sync="deletDialogVisible"
      width="30%"
      :center="true"
    >
      <h3 style="text-align:center">{{ cameraManagement.sureDelete }}</h3>
      <span slot="footer" class="dialog-footer">
        <el-button
          class="deleteBtn boxShadowButton"
          @click="delet"
          :size="size"
          >{{ cameraManagement.yes }}</el-button
        >
        <el-button
          class="cancelBtn boxShadowButton"
          :size="size"
          @click="deletDialogVisible = false;"
          >{{ cameraManagement.no }}</el-button
        >
      </span>
    </el-dialog>

    <!-- 设备离线状态弹窗 by xiang 2020/3/6 -->
    <el-dialog
      :title="equipmentStatus.status"
      :visible.sync="statusDialogVisible"
      width="40%"
      :center="true"
      @close="closeStatusDialogVisible"
    >
      <span>
        <el-table
          :data="statusList"
          :row-style="tableRowStyle"
          :header-cell-style="tableHeaderColor"
        >
          <el-table-column
            type="index"
            :label="equipmentStatus.sort"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="deviceNo"
            :label="equipmentStatus.name"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="createdTime"
            :label="equipmentStatus.updataTime"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="online"
            :label="equipmentStatus.online"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.online == 1" style="color:green">{{
                cameraManagement.online
              }}</span>
              <span v-else style="color:red">{{
                cameraManagement.offline
              }}</span>
            </template>
          </el-table-column>
        </el-table>
      </span>
      <!-- 分页 -->
      <span>
        <el-pagination
          background
          layout="total,prev, pager, next,jumper"
          :total="listTotal"
          style="margin-top:20px"
          align="center"
          class="fenye"
          @current-change="listChangePage"
          :current-page="listCurrentPage"
        >
        </el-pagination>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="statusDialogVisible = false;">{{
          cameraManagement.check
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import bus from "../../../vuex/eventBus"; //引入eventBus,接收子界面传递的跳转指令,然后在父界面跳转,添加tab
export default {
  name: "CameraManagement",
  data() {
    return {
      cameraManagement: this.$t("m.cameraManagement"), //引入 lang 里面的字符串资源,
      equipmentStatus: this.$t("m.equipmentStatus"), //引入 lang 里面的字符串资源,
      size: "mini",
      formInline: {
        deviceNo: ""
      },
      dialogVisible: false,
      jiebangDialogVisible: false,
      deletDialogVisible: false,
      statusDialogVisible: false, //设备离线列表弹窗 by xiang  2020/3/6
      tableData: [],
      backList: {}, //回显的信息
      oldName: "", //绑定回显老人姓名
      ruleForm: {
        build: "",
        floor: "",
        room: ""
      },
      buildList: [],
      buildingId: 0,
      buildingName: "",
      floorList: [],
      floorNo: 0,
      roomList: [],
      roomName: "",
      roomId: 0,
      tableLoading: false, //表格加载的loading
      /* 分页的 */
      currentPage: 1, //初始页
      pageNum: 1, //页码
      pageSize: 10, //每页显示的条数
      totalDataNumber: 0, //数据的总数,
      id: "",
      firstPage: "", //第一页
      lastPage: "", //最后一页
      acceptLanguage: "ja_JP", //数据请求传参需要传的语言  ja_JP----日文
      statusList: [], //设备离线列表 by xiang 2020/3/6
      listTotal: 0, //设备死活数
      listCurrentPage: 1, //设备死活当前页面
      listPageNum: 1,
      listdeviceId: ""
    };
  },
  computed: {
    rules() {
      return {
        build: [
          {
            required: true,
            message: this.$t("m.equipmentAdd.null"),
            trigger: "change"
          }
        ],
        floor: [
          {
            required: true,
            message: this.$t("m.equipmentAdd.null"),
            trigger: "change"
          }
        ],
        room: [
          {
            required: true,
            message: this.$t("m.equipmentAdd.null"),
            trigger: "change"
          }
        ]
      };
    }
  },
  methods: {
    //添加
    add(row) {
      sessionStorage.setItem("deviceType", "indoor");
      bus.$emit("homePage", {
        type: "jump",
        path: "/equipmentAdd",
        title: this.$t("m.equipmentAdd").add
      });
    },

    /* 
      点击查询
    */
    search() {
      if (this.formInline.deviceNo == "") {
        this.queryList((this.pageNum = 1), (this.pageSize = 10));
      } else {
        this.queryList(
          this.formInline.deviceNo,
          (this.pageNum = 1),
          (this.pageSize = 10)
        );
      }
    },

    /* 
      键盘事件 按下键盘回车 查询
    */
    enterSearchMember(e) {
      console.log("回车搜索", keyCode, e);
      var keyCode = window.event ? e.keyCode : e.which;
      if (keyCode == 13 && this.formInline.deviceNo != null) {
        if (this.formInline.deviceNo == "") {
          this.queryList((this.pageNum = 1), (this.pageSize = 10));
        } else {
          this.queryList(
            this.formInline.deviceNo,
            (this.pageNum = 1),
            (this.pageSize = 10)
          );
        }
      }
    },

    //修改
    handleEdit(row) {
      console.log(row);
      let device_Info = {
        deviceName: row.deviceName,
        deviceNo: row.deviceNo,
        id: row.id
      };
      sessionStorage.setItem("deviceType", "indoor");
      sessionStorage.setItem("deviceEdit", "deviceEdit");
      sessionStorage.setItem("device_Info", JSON.stringify(device_Info));
      bus.$emit("homePage", {
        type: "jump",
        path: "/equipmentAdd",
        title: this.$t("m.equipmentAdd").edit
      });
    },

    //绑定
    bangding(row) {
      console.log(row);
      this.backList = row;
      this.dialogVisible = true;
      this.roomList = [];
      this.getBuildList();
    },

    /* 
      上一页按钮
    */
    handlePrevPage() {
      console.log(this.currentPage, this.pageNum, this.pageSize);
      this.pageNum =
        this.pageNum > this.firstPage ? this.pageNum - 1 : this.firstPage;
      console.log(this.pageNum);
      this.queryList(this.pageNum);
    },

    /* 
      下一页按钮
    */
    handleNextPage() {
      console.log(this.currentPage, this.pageNum, this.pageSize);
      this.pageNum =
        this.pageNum < this.lastPage ? this.pageNum + 1 : this.lastPage;
      console.log(this.pageNum);
      this.queryList(this.pageNum);
    },

    //查询列表
    queryList() {
      let params = new Object();
      params.deviceNo = this.formInline.deviceNo;
      params.pageNum = this.pageNum;
      params.pageSize = this.pageSize;
      this.tableData = []; //请求之前先清空数据
      this.tableLoading = true; //loading加载
      this.$postJson(
        "dmc/humidistat/queryListWithPage",
        params,
        this.acceptLanguage
      ).then(res => {
        if (res.code == 200) {
          if (res.result.list != null) {
            this.pageSize = res.result.pageSize;
            this.currentPage = res.result.pageNum;
            this.totalDataNumber = res.result.total * 1;
            (this.firstPage = res.result.firstPage), //第一页
              (this.lastPage = res.result.lastPage), //最后一页
              (this.tableData = res.result.list);
          } else {
            this.tableData = [];
            this.pageSize = 10;
            this.currentPage = 1;
            this.totalDataNumber = 0;
          }
        } else {
          this.tableData = [];
          this.pageSize = 10;
          this.currentPage = 1;
          this.totalDataNumber = 0;
        }
        setTimeout(() => {
          this.tableLoading = false;
        }, 1000);
      });
    },

    //获取楼栋列表
    getBuildList() {
      this.$postForm("omc/Building/showAll", {}, this.acceptLanguage).then(
        res => {
          this.buildList = res.result;
        }
      );
    },

    //选择楼栋
    changeBuild(val) {
      this.buildingId = val;
      // this.$refs["floor"].resetField(); //更换了楼栋之后将楼层的数据清空
      this.$refs["room"].resetField(); //更换了楼栋之后将房间的数据清空
      let buildList = this.buildList.filter(item => {
        return item.buildingId == val;
      });
      this.buildingName = buildList[0].buildingName;
      this.floorList = [];
      this.roomList = [];
      //根据楼栋查楼层
      this.$postForm(
        "omc/Building/selectById",
        { buildingId: val },
        this.acceptLanguage
      ).then(res => {
        for (var i = 0; i < res.result.floorNum; i++) {
          this.floorList.push({ floorNo: i + 1 });
        }
      });
      this.changeFloor(1);
    },

    //选择楼层
    changeFloor(val) {
      this.floorNo = val;
      this.$refs["room"].resetField(); //换更楼层之后将房间的数据清空
      this.getRoom(); //获取房间数据
    },

    //根据楼栋楼层获取房间信息
    getRoom() {
      let param = {
        buildingId: this.buildingId,
        floorNo: this.floorNo
      };
      this.roomList = [];
      this.$postJson("omc/Room/queryRoomInfo", param, this.acceptLanguage).then(
        res => {
          this.roomList = res.result;
        }
      );
    },

    //选择房间
    changeRoom(val) {
      this.roomId = val;
      let roomList = this.roomList.filter(item => {
        return item.roomId == val;
      });
      console.log(roomList);
      this.roomName = roomList[0].roomNo;
      this.lifeRoom(this.roomId);
    },

    //通过房间roomId查询
    lifeRoom(lifeRoomId) {
      this.oldName = "";
      this.$postForm(
        "omc/Room/theLifeRoom/" + lifeRoomId,
        {},
        this.acceptLanguage
      ).then(res => {
        console.log(res, "-----");
        this.oldName =
          res.result[0].oldName == null ? "" : res.result[0].oldName;
      });
    },

    //绑定房间号
    bangdingForm(ruleForm) {
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          console.log(
            this.buildingName + "-" + this.floorNo + "-" + this.roomName
          );
          let param = {
            deviceId: this.backList.id,
            bindType: 4, //life集团固定传4
            location:
              this.buildingName + "-" + this.floorNo + "-" + this.roomName,
            roomId: this.roomId
          };
          this.$postJson(
            "dmc/humidistat/bind",
            param,
            this.acceptLanguage
          ).then(res => {
            if (res.code == 200) {
              this.$message({ message: res.message, type: "success" });
              this.dialogVisible = false;
              this.queryList();
            } else {
              this.$message({ message: res.message, type: "error" });
            }
          });
        }
      });
    },

    /* 
      解绑
    */
    unBind(row) {
      console.log(row);
      this.jiebangDialogVisible = true;
      this.id = row.id;
    },

    //确认解绑
    jiebangCheck() {
      this.$postForm(
        "dmc/humidistat/untied/" + this.id,
        {},
        this.acceptLanguage
      ).then(res => {
        if (res.code == 200) {
          this.jiebangDialogVisible = false;
          if (res.code == 200) {
            this.queryList();
            this.$message({ message: res.message, type: "success" });
          } else {
            this.$message({ message: res.message, type: "error" });
          }
        }
      });
    },

    /* 
      删除设备
    */

    deleteClick(row) {
      this.id = row.id;
      if (row.bind == true) {
        this.$message({
          message: this.cameraManagement.deviceDeleteMessage,
          type: "error"
        });
      } else {
        this.deletDialogVisible = true;
      }
    },

    //确认删除
    delet() {
      this.$postJson(
        "dmc/humidistat/deleteById/" + this.id,
        {},
        this.acceptLanguage
      ).then(res => {
        if (res.code == 200) {
          this.deletDialogVisible = false;
          this.queryList();
          this.$message({ message: res.message, type: "success" });
        } else {
          this.$message({ message: res.message, type: "error" });
        }
      });
    },

    //关闭弹窗
    closeBangding() {
      this.$refs.ruleForm.resetFields();
      this.oldName = "";
    },

    /* 
      初始页currentPage、初始每页数据数pagesize和数据data
    */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      //改变每页显示的条数
      this.PageSize = val;
      this.queryList();
    },

    /* 
      当前页变化
    */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.queryList();
    },

    /* 
      修改table tr行的背景色
    */
    tableRowStyle({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "background-color: #efefef";
      } else {
        return "background-color: #f9f9f9";
      }
    },

    /* 
      修改table header的背景色
    */
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color:#ffffff;color:#000000;font-weight: 700;";
      }
    },

    //获取设备是否离线状态 by xiang 2020/3/6
    equipmentstatus(row) {
      this.statusDialogVisible = true;
      this.listdeviceId = row.id;
      let param = {
        pageNum: this.listPageNum,
        pageSize: this.pageSize,
        deviceId: this.listdeviceId,
        groupId: sessionStorage.getItem("groupId")
      };
      this.$postJson("dmc/online/queryListWithPage", param).then(res => {
        this.statusList = res.result.list;
        this.listTotal = Number(res.result.total);
      });
    },

    //设备死活翻页 by xiang
    listChangePage(val) {
      this.listCurrentPage = val;
      let param = {
        pageNum: val,
        pageSize: this.pageSize,
        deviceId: this.listdeviceId,
        groupId: sessionStorage.getItem("groupId")
      };
      this.$postJson("dmc/online/queryListWithPage", param).then(res => {
        this.listTotal = Number(res.result.total);
        this.statusList = res.result.list;
      });
    },

    //关闭设备死活弹窗清空
    closeStatusDialogVisible() {
      this.listPageNum = 1;
      this.listCurrentPage = 1;
    }
  },
  created() {},
  mounted() {
    this.queryList();
    bus.$on("refreshIndoorList", () => {
      this.queryList();
    });
  },
  destroyed() {
    bus.$off("refreshIndoorList");
  }
};
</script>
<style lang="scss" scoped>
/deep/.el-select input {
  width: 150px;
  border: none !important;
  border-bottom: 2px solid #cccccc !important;
  border-radius: 1px;
}
.border {
  width: 10px;
  height: 30px;
  background: black;
  margin-right: 10px;
}
.addBtn {
  color: #7e7e7e;
}
.cancelBtn {
  background: white;
}
.searchBtn {
  background: #409efe;
  color: #ffffff;
}
.detailBtn {
  background: #fe0000;
  color: #ffffff;
  border-radius: 5px;
}
.jiebangBtn {
  background: #409eff;
  color: #ffffff;
  border-radius: 5px;
}
.detailBtn {
  width: 128px;
  background: #67c23a;
  color: #ffffff;
  border-radius: 5px;
}
.editBtn {
  background: #e6a23c;
  color: #ffffff;
  border-radius: 5px;
}
.deleteBtn {
  background: #dddddd;
  color: #010101;
  border-radius: 5px;
}
.prevPage {
  background: #409efe;
  color: #ffffff;
}
.nextPage {
  background: #ffffff;
}
/deep/ .deviceDialog .el-form-item {
  margin-bottom: 20px !important;
}
/deep/ .deviceDialog .el-form-item__label {
  line-height: 20px !important;
}
/deep/ .deviceDialog-contentOne .el-form-item__content {
  height: 35px !important;
  line-height: 40px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/deep/ .deviceDialog-contentTwo .el-form-item__content {
  height: 35px !important;
  line-height: 30px !important;
}
/deep/ .deviceDialog .el-input__inner {
  height: 20px !important;
  line-height: 20px !important;
}
/deep/ .deviceDialog .el-input__icon {
  height: 120% !important;
}
/deep/ .deviceDialog .el-input {
  width: 150px !important;
}
</style>
